
// 先设定参数

// 默认 显示 第一页 内容
let page = 1;
// 默认 每页 显示 8 条数据
let line = 8;
// 获取浏览器地址栏数据对象
let obj = myGetUrlValObj();
// console.log( obj );



// 使用 async 和 await 实现
setPage();
async function setPage(){

  // 向 后端程序发送 ajax请求
  const res =await myPromiseJQueryAjax( '../server/goods_list.php' , 'get' , {
    cat_one_id: obj.cat_one_id,
    page:page,
    // 对象的简写语法,键名和键值的变量 名称相同 写一个就行了
    line,
  } , 'json' );
  console.log(res);

  // 根据 响应体结果 动态渲染生成 页面
  let str = '';
  res.data.forEach(function(item){
    str += `
    <li class="list-item">
      <div class="panel panel-primary">
        <div class="panel-body">
          <ol class="breadcrumb">
            <li><a href="#">${item.cat_one_id}</a></li>
            <li><a href="#">${item.cat_two_id}</a></li>
            <li class="active">${item.cat_three_id}</li>
          </ol>
        </div>
        <div class="panel-footer">
          <div class="row">
            <div class="">
              <div class="thumbnail">
                <img src="${item.goods_big_logo}" alt="...">
                <div class="caption">
                  <h3>${item.goods_name}</h3>
                  <p>
                    <i class="glyphicon glyphicon-yen"></i>
                    <span>${item.goods_price}</span>
                  </p>
                  <p>
                    <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                    <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    `;
  })

  $('.container ul').html(str);

  // 将 分页插件程序 直接定义在 响应体程序中
  // 分页插件功能
  $('.box').pagination({
    pageCount: res.sumPage,       // 总页数
    totalData: res.row,           // 数据总数量
    current: res.page,            // 当前第几页
    showData: res.line,           // 每页数据数量
    prevCls:'prev',               // 上一页类名
    nextCls:'next',               // 下一页类名
    prevContent: '上一页',         // 上一页内容
    nextContent: '下一页',         // 下一页内容
    activeCls: 'active',           // 选中页 class类名
    mode: 'fixed',                 // 显示分页按钮 为 固定模式状态
    count: 4,                      // 分页按钮 显示的数量 不算 选中页 也就是 设定4 一共显示 5个按钮
    coping: true,                  // 显示 首页 末页
    homePage: '首页',              // 设定首页内容
    endPage: '末页',               // 设定末页内容
    isHide: true,                  // 总页数 为 0 或者 1 隐藏 分页控件
    keepShowPN: true,              // 显示 上一页 下一页 
    jump: true,                    // 开启 跳转
    callback:function(result){     // 执行的回调函数 必须要有一个参数
      // 参数.getCurrent() 获取分页插件 点击之后 对应的页数
      console.log( result.getCurrent()  );

      // 将结果 赋值给 page 变量 存储
      page = result.getCurrent();

      // 根据新的 page 数据 再次发送请求 动态渲染生成新的页面
      setPage()
    }
  });

}



